<template>
  <div>
    <!-- 通过判断htoFilmList中的内容来检测让load展示与否 -->
    <loading v-if="!hotFilmList.length"></loading>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="upPullLoading"
        :finished="upPullFinished"
        finished-text="加载完成"
        @load="onLoad"
        offset="200"
      >
        <lazy-component
          ><film-list :list="hotFilmList" :type="type"></film-list
        ></lazy-component>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import FilmList from "@/components/FilmList.vue";
import Loading from "@/components/Loading";
export default {
  data() {
    return {
      // hotFilmList 为热门电影的列表
      hotFilmList: [],
      // type为 1 表示当前的是正在热播页面
      type: 1,
      // vant组件中的是否处于加载状态
      isLoading: false,
      // 上拉置底组件加载状态
      upPullLoading: false,
      // 上拉加载状态
      upPullFinished: false,
    };
  },
  components: {
    FilmList,
    Loading,
  },
  created() {
    let data = JSON.parse(sessionStorage.getItem("hotFilmList"));
    this.hotFilmList = data ? data : [];
    this.getFilm();
  },
  methods: {
    onRefresh() {
      // 先将当前数组清空，
      this.upcommingList = [];
      this.getList();
    },
    onLoad() {
      this.upPullLoading = true;
      this.getFilm();
      this.upPullLoading = false;
      console.log("触底了");
    },
    async getFilm() {
      let res = await this.$axios("seatSell/hotFilm");
      let filmData = res.data.data.films;
      this.hotFilmList = [...this.hotFilmList, ...filmData];
      if (this.hotFilmList.length < 40) {
        sessionStorage.setItem("hotFilmList", JSON.stringify(this.hotFilmList));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
